<template>
	<view>
		<u-toast ref="uToast" />
		<view class="title">
			<view class="title-text">
				<text style="color: #82848a;" v-if="borrowInfo.state == 1">借给谁：</text>
				<text style="color: #82848a;" v-else>向谁借：</text>
				<text>{{borrowInfo.person}}</text>
			</view>
		</view>
		
		<view class="in-out-flow">
			<view class="inflow">
				<text style="color: #82848a;">总额:</text>
				<text>{{borrowInfo.borrowMoney}}</text>
			</view>
			<view class="outflow">
				<text style="color: #82848a;" v-if="borrowInfo.state == 1">已收:</text>
				<text style="color: #82848a;" v-else>已还:</text>
				<text>{{borrowInfo.refundMoney}}</text>
			</view>
		</view>
		
		<view>
			<u-divider lineColor="#82848a" :dot="true"></u-divider>
		</view>
		
		<view>
			<view class="cell-group">
				<view class="cell-icon">
					<u-icon name="/static/account/info/borrow.png" size="28" color="#2979ff" ></u-icon>
				</view>
				<view class="cell-item" @click="getDetailInfo(index1)">
					<view class="cell-info">
						<view class="info-text">
							<text>{{[borrowInfo.state == 1 ? "借出" : "借入"]}}</text>
						</view>
						<view class="info-remarks">
							<text>{{borrowInfo.borrowDate}}</text>
						</view>
					</view>
					<view class="cell-money">
						<text>{{[borrowInfo.state == 1 ? '-' : '+']+borrowInfo.borrowMoney}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="button">
			<view class="submit-button">
				<u-button type="primary" text="收款" @click="open()" v-if="borrowInfo.state == 1"></u-button>
				<u-button type="primary" text="还款" @click="open()" v-else></u-button>
			</view>
		</view>
		
		<view>
			<u-popup :show="show" :round="15" @close="close" @open="open">
				<view style="height: 700rpx">
					<view class="input">
						<view class="left-icon">
							<text v-if="borrowInfo.state == 1">收款额：</text>
							<text v-else>还款额：</text>
						</view>
						<view class="drivider"></view>
						<view class="right-input">
							<input class="aaa" placeholder="0.00" type="digit" placeholder-class="bbb" v-model="input_money"/>
						</view>
					</view>
					<view class="text-input">
						<view class="left-text">
							<text>账户：</text>
						</view>
						<view class="right-textarea">
							<picker mode="selector" :range="account_list" :value="account" @change="getAccount" style="font-size: 30rpx;">
								<view>
									<text style="font-size: 40rpx; color: #606266;">{{account}}</text>
								</view>
							</picker>
						</view>
					</view>
					
					<view class="button">
						<view class="submit-button">
							<u-button type="primary" text="确定" @click="repayment()"></u-button>
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				borrowInfo: {},
				show: false,
				account_list: [],
				account: "选择账户（可选）",
				input_money: '',
			}
		},
		onShow() {
			
		},
		onLoad(options) {
			this.borrowInfo = JSON.parse(options.data)
		},
		methods: {
			getAccount: function(e) {
				this.account = this.account_list[e.target.value]
			},
			sectionChange(index){
				this.current = index;
				this.getAccountBill(uni.getStorageSync('userId'), this.accountId, this.current)
			},
			getDetailInfo (num) {
				let data = this.list[num]
				uni.navigateTo({
					url: '/pages/detailInfo/detailInfo?data='+JSON.stringify(data)
				})
			},
			getAccountBill(userId, accountId, listType) {
				let params = {
					"userId": userId,
					"accountId": accountId,
					"listType": listType
				}
				const _this = this
				uni.request({
					header: {
						  'Content-Type': 'application/x-www-form-urlencoded',
						  'token': uni.getStorageSync('token')
					   }, 
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/account/loadaccountbill",
					method: 'POST',
					data: params,
					success(res) {
						console.log(res)
						_this.list = res.data.data
					}
				})
			},
			repayment() {
				if (this.input_money == null || this.input_money == 0){
					this.$refs.uToast.show({
						type: 'error',
						title: '信息有误',
						message: "输入信息有误",
					})
					return
				}
				
				let account
				if (this.account != "选择账户（可选）") {
					account = this.account
				}else{
					account = null
				}
				
				let params = {
					"userId": uni.getStorageSync('userId'),
					"borrowId": this.borrowInfo.borrowId,
					"refundMoney": this.input_money,
					"accountName": account,
					"borrowState": this.borrowInfo.state
				}
				
				console.log(params)
				const _this = this
				uni.request({
					header: {
						'Content-Type': 'application/json',
						'token': uni.getStorageSync('token') 
					},
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/borrow/repayment",
					method: 'POST',
					data: params,
					success(res) {
						console.log(res)
						_this.show = false
						if (res.data.code == 200) {
							_this.$refs.uToast.show({
								type: 'success',
								title: '操作成功',
								message: res.data.errorMessage,
								duration: 700,
								complete() {
									uni.switchTab({
										url: '/pages/account/account',
										success: (res) => {
											let page = getCurrentPages().pop();
											if (page == undefined || page == null) return;
											page.onLoad();
										}
										
									})
								},
								
							})
						}else{
							_this.$refs.uToast.show({
								type: 'error',
								title: '操作失败',
								message: res.data.errorMessage,
								duration: 1000,
							})
						}					
					}
				})
			},
			close() {
				this.show = false
			},
			open() {
				this.show = true
				let userId = uni.getStorageSync('userId')
				let params = {
					"userId": userId,
				}
				const _this = this
				uni.request({
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': uni.getStorageSync('token') 
					},
					url: this.$USER_AVATOR_URL.USER_AVATOR_URL+"/account/useraccount",
					method: 'POST',
					data: params,
					success(res) {
						_this.account_list = res.data.data						
					}
				})
			},
			
			
		},


	}
</script>

<style>
	
	.delete-button{
		
		width: 100rpx;
		height: 50rpx;

	}
	
	.title {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 100rpx;
	}
	.title-text {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 35rpx;
	}
	
	.in-out-flow {
		font-size: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 40rpx;
	}
	.inflow {
		width: 350rpx;
		display: flex;
		justify-content: center;
	}
	.outflow {
		width: 350rpx;
		display: flex;
		justify-content: center;
	}
	
	.checkbox{
		margin-left: 150rpx;
		margin-right: 150rpx;
	}
	.divider{
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-bottom: 40rpx;
	}
	
	.cell-group {
		display: flex;
		flex-wrap: wrap;
		margin-top: 25rpx;
		margin-left: 30rpx;
		margin-right: 20rpx;
	}
	.cell-icon {
		width: 85rpx;
		height: 85rpx;
		display: flex;
		align-items: center;
		background-color: #2979ff;
		
		border-radius: 100%;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
	}
	.cell-item {
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;
		border-bottom: #c8c9cc;
		border-style: hidden hidden solid hidden;
		border-width: 1rpx;
	}
	.cell-info {
		width: 380rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-left: 20rpx;
	}
	.info-text {
		font-size: 35rpx;
		width: 400rpx;
		height: 60rpx;
	}
	.info-remarks {
		width: 400rpx;
		color: #909399;
	}
	.cell-money {
		width: 200rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		
		font-size: 40rpx;
		font-weight: bolder;
	}
	
	.button{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 400rpx;
	}
	.submit-button{
		width: 400rpx;
		height: 100rpx;
		font-size: 100rpx;
		color: black;
	}
	
	.input{
		margin-top: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		flex-wrap: wrap;
		border-bottom: #909399;
		border-style: hidden hidden solid hidden;
		border-width: 1rpx;
	}
	.left-icon{
		width: 200rpx;
		font-size: 50rpx;
		display: flex;
		justify-content: flex-end;
	}
	.right-input{
		width: 450rpx;
		height: 90rpx;
	}
	.aaa{
		height: 80rpx; 
		min-height: 60rpx;
		font-size: 80rpx;
	}
	.text-input{
		display: flex;
		flex-wrap: wrap;
		margin-top: 40rpx;
		margin-left: 30rpx;
	}
	.left-text{
		width: 200rpx;
		font-size: 40rpx;
		color: #303133;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
	}
	.right-textarea{
		width: 400rpx;
		display: flex;
		align-items: flex-start;
	}

</style>
